<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-06 11:24:10
 * @LastEditTime: 2024-06-06 13:37:08
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 视图管理面板
 * @FilePath: \chu-meng\client\src\pages\Design\components\SidebarArea\ViewSidebar\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="modWrap">
    <a-collapse v-model:activeKey="activeKey" :bordered="false">
      <a-collapse-panel key="PAGE" header="视图">
        <ViewArea ref="ViewAreaRef"></ViewArea>
      </a-collapse-panel>
      <a-collapse-panel key="LAYER" header="图层">
        <LayerArea ref="LayerAreaRef"></LayerArea>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup>
// import {
//   RotateLeftOutlined,
//   RotateRightOutlined,
//   FilePptOutlined
// } from '@ant-design/icons-vue'
import { ref } from 'vue'
import ViewArea from './ViewArea.vue'
import LayerArea from './LayerArea.vue'

const activeKey = ref(['PAGE', 'LAYER'])
</script>

<style lang="scss" scoped>
.modWrap{
  :deep(.ant-collapse){
    >.ant-collapse-item>.ant-collapse-content>.ant-collapse-content-box{
      background: #fff;
    }
    >.ant-collapse-item{
      border-bottom: 0;
    }
    >.ant-collapse-item >.ant-collapse-header{
      border-bottom: 1px solid #f0f0f0;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }
}
</style>
